<template>
  <div>
    <div class="info">
      <h2>基本信息</h2>
    </div>
    <el-form :model="info" label-position="top" ref="publishForm" :rules="publishRule">
      <el-form-item label="作者" prop="nickname">
        昵称：
        <span>{{ info.nickname }}</span>
        <br />
        uuid：
        <span>{{ info.uuid }}</span>
        <br />
        <el-button type="primary" @click="showCreatorList = true">选择作者</el-button>
      </el-form-item>
      <el-form-item label="职责">
        <el-select filterable v-model="info.role">
          <el-option v-for="(t, index) in roleList" :key="index" :label="t" :value="t"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="typeName + '名称'">
        <el-input v-model="info.title"></el-input>
      </el-form-item>
      <el-form-item prop="cover" :label="typeName + '封面'">
        <div class="cover-box">
          <div class="cover-box-image" v-if="info.cover">
            <img :src="info.cover" />
          </div>
          <upload-resource
            is-public
            @upload="setCoverFile"
            folder="asset"
            :cv-id-path="info.courseId || info.videoId"
          ></upload-resource>
        </div>
      </el-form-item>
      <el-form-item label="视频内容" v-if="isVideo">
        <player :videoId="vid" :width="width" :height="height"></player>
      </el-form-item>
      <el-form-item :label="typeName + '详情'">
        <hybrid-editor
          content-type="raw"
          v-model="info.content"
          ref="editor"
          workTypeStr="article"
          :css-from-root="$attrs['css-from-root']"
        ></hybrid-editor>
      </el-form-item>
      <h2>{{ typeName }}属性</h2>
      <el-form-item :label="typeName + '分类'" prop="cateId">
        <el-cascader-panel
          v-model="info.cateId"
          :options="cateTree"
          :props="{
            value: 'id',
            label: 'title',
            children: 'childs',
            emitPath: false,
          }"
        ></el-cascader-panel>
      </el-form-item>
      <el-form-item label="标签(最多选三个)">
        <el-checkbox-group v-model="checkTagList" :max="max">
          <el-checkbox v-for="tag in tagList" :label="tag" :key="tag"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否匿名">
        <el-radio v-model="info.anonymous" :label="1">是</el-radio>
        <el-radio v-model="info.anonymous" :label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="是否精选" v-permission="['crawl:delicated']">
        <el-radio v-model="info.delicated" :label="1">是</el-radio>
        <el-radio v-model="info.delicated" :label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="作品原创属性" class="set">
        <el-radio v-model="info.original" :label="1">原创</el-radio>
        <el-radio v-model="info.original" :label="0">转载</el-radio>
      </el-form-item>
      <el-form-item label="首次提审时间" v-if="info.publishAt">
        <span>{{ info.publishAt }}</span>
      </el-form-item>
      <el-form-item label="最新更新时间" v-if="info.updatedAt">
        <span>{{ info.updatedAt }}</span>
      </el-form-item>
      <el-form-item label="首次上线时间" v-if="info.onlineAt" class="set">
        <span>{{ info.onlineAt }}</span>
      </el-form-item>
      <edit-bar>
        <el-button type="primary" @click="save" :disabled="publishDisabled">
          {{ btnText }}
        </el-button>
        <el-button @click="$tabs.close()">取消</el-button>
      </edit-bar>
    </el-form>
    <el-dialog :visible="showCreatorList" :before-close="closeDialog" width="90%">
      <search-list
        ref="creatorList"
        :api-url="$url.WorkpoolCreatorList"
        :itemPerRow="8"
        :option="searchOpt"
      >
        <template>
          <el-table-column prop="uuid" label="用户id"></el-table-column>
          <el-table-column prop="nickname" label="创作者名称"></el-table-column>
          <el-table-column label="身份认证">
            <template slot-scope="scope">
              <span>
                {{
                  $selectFormat['identifiedShow'](
                    scope.row.jmPerson + '' + scope.row.jmTeam + scope.row.ktTeacher,
                  ).label
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="fansCnt" label="粉丝数"></el-table-column>
          <el-table-column prop="followCnt" label="收藏数"></el-table-column>
          <el-table-column prop="workCnt" label="作品数"></el-table-column>
          <el-table-column prop="phone" label="电话号码"></el-table-column>
        </template>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="selectOne(scope.row)">选择这个</el-button>
          </template>
        </el-table-column>
      </search-list>
    </el-dialog>
  </div>
</template>

<script>
  import EditMixins from 'mixins/Edit';
  import EditBar from 'comp/EditBar';
  import Player from 'comp/Player';
  import { mapGetters } from 'vuex';
  import UploadResource from 'comp/UploadResource';
  import HybridEditor from '../../components/HybridEditor';
  import { FormRuleConf } from '@/config';

  export default {
    mixins: [EditMixins],
    data() {
      return {
        ...FormRuleConf.Publish,
        showCreatorList: false,
        cateTree: [],
        max: 3,
        creatorlist: [],
        coverList: [],
        roleList: [],
        checkTagList: [],
        tagList: [],
        MAX_TAG_COUNT: 8,
        preViewShow: false,
        activeName: 'first',
        tabType: '',
        newVal: '',
        vid: '',
        workId: '',
        jimuUrl: process.env.VUE_APP_JIMU_URL,
        // 视频播放器的宽高
        width: '300px',
        height: '300px',
        editorInitData: '',
        publishDisabled: false, //发布按钮禁用
        btnText: '发布',
        info: {
          uuid: '',
          title: '',
          cover: '',
          content: '',
          cateId: '',
          role: '',
          anonymous: '',
          delicated: '',
          original: '',
          checked: '',
        },
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'nickname',
            label: '输入昵称查询',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'uuid',
            label: '输入用户id查询',
          },
          {
            type: 'creatorSl',
            name: 'order',
            label: '排序',
          },
          {
            type: 'identifiedSl',
            name: 'identified',
            label: '身份认证',
          },
        ],
      };
    },
    components: {
      EditBar,
      Player,
      UploadResource,
      HybridEditor,
    },
    watch: {
      'info.cateId'() {
        if (this.info.cateId) this.getTags();
      },
    },
    mounted() {
      this.getCategory();
      this.getRole();
    },
    computed: {
      isVideo() {
        return this.info.workType == 1;
      },
      isArticle() {
        return this.info.workType == 2;
      },
      typeName() {
        const zhStr = ['视频', '文章'];
        return zhStr[this.info.workType - 1];
      },
      ...mapGetters(['$permission']),
    },
    methods: {
      //获取爬取作品详情
      getInfo() {
        if (!this.id || this.infoGetting) return;
        this.infoGetting = true;
        this.$service
          .CrawlContentEdit({ id: this.id })
          .then((res) => {
            this.info = { ...res };
            this.vid = this.info.videoId;
            this.workId = this.info.workId;
            if (this.info.content) {
              this.info.content = this.info.content
                .replace(/(\n)+|(\r\n)+/g, '')
                .replace(/<div|<pre|<section|<a|<svg/g, '<p')
                .replace(/<\/div|<\/pre|<\/section|<\/a/g, '</p')
                .replace(/(id|class|style|width|height|href|data.*?)=['"].*?['"]/g, '')
                .replace(/(<p><iframe.*?>.*?<\/iframe><\/p>)/g, '');
              this.info.content = '<p>' + this.info.content + '</p>';
              this.info.content = this.$refs.editor.pasteImageHandler(this.info.content);
            }
          })
          .catch((err) => {})
          .finally(() => {
            this.infoGetting = false;
          });
      },
      //获取分类
      getCategory() {
        this.$service
          .HttpsSquareDictCategories({ workType: this.$route.params.kind })
          .then((res) => {
            for (var i = 0; i < res.length; i++) {
              if (res[i].childs.length > 0) {
                for (var j = 0; j < res[i].childs.length; j++) {
                  if (res[i].childs[j].childs.length < 1) {
                    res[i].childs[j].childs = undefined;
                  }
                }
              }
            }
            this.cateTree = res;
          });
      },
      //获取标签
      getTags() {
        if (this.info.cateId) {
          this.$service
            .HttpsSquareDictTags({
              categoryId: this.info.cateId,
            })
            .then((res) => {
              this.tagList = res;
              console.log(this.tagList);
            });
        }
      },
      //获取职责
      getRole() {
        this.$service.HttpsSquareDictRoles({}).then((res) => {
          this.roleList = res;
        });
      },
      //获取作者
      selectOne(item) {
        this.$set(this.info, 'nickname', item.nickname);
        this.info.nickname = item.nickname;
        this.info.uuid = item.uuid;
        this.showCreatorList = false;
      },

      setCoverFile(data) {
        this.$set(this.info, 'cover', data.url);
      },

      handleClose() {
        this.preViewShow = false;
      },
      closeDialog() {
        this.showCreatorList = false;
      },

      save() {
        this.$refs.publishForm.validate((valid) => {
          if (valid) {
            this.publishDisabled = true;
            this.btnText = '发布中';
            this.$service
              .WorkPublish(
                {
                  ...this.info,
                  uid: this.info.uuid,
                  tag: this.checkTagList.toString(),
                  contentId: this.$route.params.id,
                },
                JSON_HEADER,
              )
              .then((res) => {
                this.$message.success('发布成功');
                //路由回退
                this.$router.back(-1);
              })
              .catch((res) => {
                this.publishDisabled = false;
                this.$message.error('发布失败');
              });
          }
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  h2 {
    padding-left: 20px;
    border-left: 5px solid #495464;
    line-height: 1;
    margin-bottom: 10px;
  }
  .info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  /deep/ .el-form-item__label {
    font-size: 16px;
    padding: 10px 5px !important;
    margin-bottom: 10px;
    border-radius: 3px 3px 0 0;
    background: #ced6e2;
    color: #222;
    width: 100%;
    line-height: 24px;
  }
  .edit-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    left: 210px;
    background: white;
    padding: 20px;
    border-top: 1px solid #ccc;
    z-index: 11;

    /deep/ .el-button {
      margin-left: 10px;
    }
  }
  .set {
    margin-bottom: 60px;
  }
  .priceDiv1 {
    display: flex;
    margin-bottom: 10px;
  }
  .priceDiv2 {
    display: flex;
    margin-bottom: 10px;
  }
  .font {
    font-size: 16px;
    padding-right: 10px;
  }
  .recomTag {
    display: flex;
    flex-wrap: wrap;
  }
  .opeTag {
    height: 50px;
    margin-bottom: 10px;
    border: 1px solid #dcdfe6;
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
  }
  /deep/ .el-tag {
    margin-right: 10px;
    font-size: 14px;
  }
  /deep/ .el-tag--medium {
    height: 38px;
    line-height: 38px;
    margin-bottom: 5px;
  }
  .imgBox {
    display: flex;
    flex-wrap: wrap;
  }
  .picture {
    margin-right: 15px;
    margin-bottom: 10px;
    height: 150px;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .cover-box {
    display: flex;
    align-items: flex-start;

    &-image {
      width: 200px;
      // height: 150px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-item {
      width: 200px;
      // height: 100px;
      margin-right: 5px;
      cursor: pointer;
      &.active,
      &:hover {
        border: 2px solid #ffc600;
      }
    }
  }
  /deep/.el-col-8 {
    width: 100%;
    margin-bottom: 20px;
  }
  /deep/ .el-input--mini .el-input__inner {
    height: 37px;
    line-height: 37px;
  }
  .warn {
    color: red;
    margin-bottom: 10px;
  }
</style>
